<template>
  <f7-popup id="editpassword">
    <div class="view">
      <div class="page">
        <f7-navbar>
          <f7-nav-left>
            <f7-link close-popup ><i class="f7-icons">chevron_left</i></f7-link>
          </f7-nav-left>
          <f7-nav-center title="修改密码"></f7-nav-center>
        </f7-navbar>

        <div class="editor-container">
          
          <ul class="tools flex-row">
            <li class="tool">
              <input type="password" v-model="info.optionpass" placeholder="请输入原密码"/>
              <input type="password" v-model="info.password" placeholder="请输入密码"/>
              <input type="password" v-model="info.confirmpass" placeholder="请确认密码"/>
              <p><a href="#" class="button button-big button-fill color-blue" v-on:click="savePass">保 存</a></p>
            </li>
          </ul>

        </div>

      </div>
    </div>

  </f7-popup>
</template>


<script>
  export default {
    data() {
      return {
        info:{
          optionpass:"",
          password:"",
          confirmpass:""
        }
      }
    },
    methods: { 
      savePass(){
          if (this.info.optionpass == "" || this.info.password == "" || this.info.confirmpass == ""){
            this.$f7.alert("请输入原密码及新密码", "hichat");
            return false;
          }
          if (this.info.password != this.info.confirmpass){
            this.$f7.alert("新密码和确认密码不一致", "hichat");
            return false;
          }
          this.$emit("edit-password", this.info);
      },
      clearContent(){
        this.info.optionpass = "";
        this.info.password = "";
        this.info.confirmpass = "";
      }
    }
  }
</script>

<style lang="less" scoped>

  .editor-container {
    margin-top:70px;
    input {
      width: 80%;
      height: 30px;
      font-size: 15px;
      border: 1px solid #efefef;
      color: #444;
    }

    .tools {
      width: 100%;
      height: 200px;
      background-color: #f9f9f9;
      border-bottom: 1px solid #dadada;
      border-top: 1px solid #dadada;
      list-style: none;
      margin: 0;
      padding: 0;
      margin-top: -5px;

      .tool {
        width: 100%;
        height: 100%;
        text-align: center;
        line-height: 40px;

        .iconfont {
          color: #666;
        }

      }
    }
  }
  /deep/ .avatar {
    width: 50px;
    height: 50px;
  }
</style>


